<template>
	<div class="permission-user">
		<bread-crumb divider>
			<template slot="title">账号管理</template>
		</bread-crumb>
		<div>
			<el-button @click="getDataList">重新读取数据</el-button>
		</div>
		<el-table :data="dataList" size="" v-loading="loading"  border style="width:100%">
			<el-table-column prop="id" label="id" width="70"></el-table-column>
			<el-table-column prop="account" label="账号名称"></el-table-column>
			<el-table-column prop="password" label="密码" width=""></el-table-column>
			<el-table-column prop="title" label="角色名称" width=""></el-table-column>

			<el-table-column label="操作" fixed="right" width="170">
				<template slot-scope="scope">
					<el-button type="danger" size="small" @click="actChangeUser(scope.row)">更改角色</el-button>
				</template>
			</el-table-column>

		</el-table>

		<el-dialog title="角色修改 " :visible.sync="visibleDialog"  width="500px" >
			<div>
				<el-radio-group v-model="submitData.roleId">
					<el-radio :label="item.id" border v-for="item in roleList" :key="item.id">{{item.title}}</el-radio>
				</el-radio-group>
			</div>
			<span slot="footer" class="dialog-footer">
			    <el-button @click="visibleDialog = false">取 消</el-button>
			    <el-button type="primary" @click="actSubmit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import breadCrumb from '@/views/components/breadCrumb';
import { mixinUtils } from '@/mixins/mixins.utils';
import { apiAdminList, apiRoleAdd, apiRoleList, apiUserRoleEdit } from '@/axios/api.system';
import { mixins } from '@/mixins/mixins.global';
import { mapState } from 'vuex';
export default {
	name: 'permission-user',
	mixins: [mixinUtils],
	components: {breadCrumb},
	data:function(){
		return {
			visibleDialog:false,
			//原始值
			pagerCount: 5,//饿了么垃圾分页的页块显示
			page      : 1,
			pageSize  : 10,
			totalCount: 0,//总记录数

			//复杂值
			dataList: [],//数据列表
			roleList:[],//角色列表
			submitData:{
				userId:0,
				roleId:0,
			}
		}
	},
	computed:{
		...mapState(['loading',]),
	},
	created() {
		this.getDataList()
		this.getRoleData()
	},
	methods:{
		getDataList(){
			apiAdminList({
				pageSize    : this.pageSize,
				page     : this.page,
			}).then((res) => {
				this.totalCount = res.count
				if (res.data.length > 0) {
					this.dataList = res.data
				} else {
					this.dataList = []
				}
			})
		},
		//获取角色列表
		getRoleData() {
			apiRoleList({
				pageSize: 100,
				page    : 1,
			}).then((res) => {
				if (res.data.length > 0) {
					this.roleList = res.data
				}
			})
		},

		//提交
		actSubmit() {
			this.$confirm('确认修改吗？')
				.then(_ => {
					this.visibleDialog = false
					apiUserRoleEdit(this.submitData).then((res)=>{
						if(res.resultFlag){
							this.notify('操作成功','','success')
							this.getDataList()
						}else{
							this.$message({type:'warning',message:res.resultMsg})
						}
					})
				})
				.catch(_ => {

				});
		},

		actChangeUser(row){
			this.visibleDialog = true
			this.submitData.userId = row.id
			this.submitData.roleId = row.roleId
			console.log(row)
		},
		handleSizeChange (val) {
			console.log('改变每页数',val)
			this.page = 1 //恢复第一页
			this.pageSize = val
			this.getDataList()
		},
		handleCurrentChange (val) {
			console.log('改变当前页',val)
			this.page = val
			this.getDataList()
		},
	}

}
</script>

<style lang="less" scoped>

</style>
